<template>
<div class="wraper">
  <div class="content">
    <div>
      <p><span>姓名:</span><span>{{userInfo.userName}}</span></p>
      <p><span>性别:</span><span>{{userInfo.userSex?'男':'女'}}</span></p>
      <p><span>身份证号码:</span><span>{{userInfo.userId}}</span></p>
      <p><span>邮编:</span><span>{{userInfo.userZipCode}}</span></p>
      <p><span>地址:</span><span>{{userInfo.userAddress}}</span></p>
    </div>
    <img :src="userInfo.userImag" alt="">
  </div>
    <tab></tab>
</div>
</template>

<script>
import Tab from "@/base/tab/tab";
export default {
  data() {
    return {
      userInfo: {}
    };
  },

  mounted() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      this.$axios
        .post(process.env.mock + "/userInfo")
        .then(res => {
          this.userInfo = res.data.userInfo;
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  components:{
    Tab
  }
};
</script>
<style lang="less" scoped>
.wraper{
overflow: hidden;
margin-bottom: 1rem;
.content {
  padding: 0.15rem;
  box-sizing: border-box;
  position: absolute;
  background: #fff;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  img {
    position: absolute;
    height: 2rem;
    width: 2rem;
    top: 0.2rem;
    right: 0.3rem;
    border-radius: 100%;
  }
  div {
    box-sizing: border-box;
    padding-left: 0.3rem;
    p {
      font-size: 0.3rem;
      color: #232323;
      height: 1rem;
      line-height: 1rem;
      position: relative;
      &:after {
        content: "";
        position: absolute;
        left: 0;
        right: 2rem;
        height: 1px;
        color: #d9d9d9;
        bottom: 0;
        border-bottom: 1px solid #dadada;
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
      }
      span {
        padding-right: 0.4rem;
        &:last-child {
          color: #999;
        }
      }
    }
  }
}
}
</style>

